import '../ModalseeS2/ModalseeS2.css'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
import {
    Form,
    Input,
    Radio,
    Select,
} from 'antd';
import http from '../../../../../utils/http';
const ModaladdS = (props) => {
    // console.log(props.fn);
    // 数据名称
    let [entry_name, setentry_name] = useState()
    const addEntry_name = e => {
        // console.log(e.target.value);
        setentry_name(e.target.value)
    };
    // 下限
    let [Lower_limit_of_value, setLower_limit_of_value] = useState()
    const addLower_limit_of_value = e => {
        // console.log('下限', e.target.value);
        setLower_limit_of_value(e.target.value)
    };
    // 上限
    let [Upper_limit_of_value, setUpper_limit_of_value] = useState()
    const addUpper_limit_of_value = e => {
        // console.log('上限', e.target.value);
        setUpper_limit_of_value(e.target.value)
    };
    // 单位
    let [Company, setCompany] = useState()
    const addCompany = e => {
        // console.log('单位', e.target.value);
        setCompany(e.target.value)
    };
    // 分数
    let [Score, setScore] = useState()
    const addScore = e => {
        // console.log('分数', e.target.value);
        setScore(e.target.value)
    };
    const { Option } = Select;
    // 表现
    let [Performance, setPerformance] = useState()
    function addPerformance(value) {
        // console.log(`表现 ${value}`);
        setPerformance(value)
    }

    // 状态
    let [State, setState] = useState(1)
    function addState(value) {
        // console.log(`状态 `, value.target.value);
        setState(value.target.value)
    }

    // 添加
    const [isModalVisible4, setIsModalVisible4] = useState(false);



    const showModal4 = () => {
        setIsModalVisible4(true);
    };

    const handleOk4 = (e) => {
        // console.log(e.target.value);
        // setIsModalVisible4(true);
        setIsModalVisible4(false);
        http({
            url: '/score/add',
            method: 'post',
            data: {
                entry_name: entry_name,
                Lower_limit_of_value: Lower_limit_of_value,
                Upper_limit_of_value: Upper_limit_of_value,
                Company: Company,
                Score: Score,
                Performance: Performance,
                State: State,
            }
        }).then((res) => {
            if (res) {
                setentry_name('');
                setLower_limit_of_value('');
                setUpper_limit_of_value('');
                setCompany('');
                setScore('');

                props.fn();
                props.pagingtotal();
            }
        })
    };

    const handleCancel4 = () => {
        setIsModalVisible4(false);
    };
    // 模态框title
    const CustomTitle4 = () => {
        return (
            <div className='CustomTitle_title'>
                添加
            </div>
        )
    }
    // React.useEffect(() => {
    //     if (!isModalVisible4) {
    //         Form.resetFields()
    //     }
    //   }, [isModalVisible4])
    return (
        <div>
            {/* 添加 */}
            <Button onClick={showModal4} size="small" className="h1_shuru_c4" type="primary">添加
            </Button>
            <Modal  destroyOnClose cancelText='返回' okText='确认' width="715px" title={<CustomTitle4 ></CustomTitle4>} visible={isModalVisible4} onOk={handleOk4} onCancel={handleCancel4} footer={[
                <Button id="ModalseeS3Btn1" key="back" onClick={handleCancel4}>返回</Button>,
                <Button id="ModalseeS3Btn2" key="submit" type="primary" onClick={handleOk4}>
                    确认
                </Button>,
            ]}>
                <div className="ModalseeC2">
                    <Form preserve={false} className="comment" >
                        <p>数据名称:</p>
                        <Form.Item>
                            <Input placeholder="请输入数据名称" onChange={addEntry_name} />
                        </Form.Item>
                        <p>数值范围:</p>
                        <div className="Health_value">
                            <Form.Item >
                                <Input placeholder="请输入数值" onChange={addLower_limit_of_value} />
                            </Form.Item>
                            <span>——</span>
                            <Form.Item>
                                <Input placeholder="请输入数值" onChange={addUpper_limit_of_value} />
                            </Form.Item>
                        </div>
                        <p>单位</p>
                        <Form.Item>
                            <Input placeholder="请输入单位" onChange={addCompany} />
                        </Form.Item>
                        <p>分值</p>
                        <Form.Item>
                            <Input placeholder="请输入分值" onChange={addScore} />
                        </Form.Item>
                        <p>表现:</p>
                        <Form.Item >
                            <Select onChange={addPerformance} placeholder="请选择">
                                <Select.Option value="严重">严重</Select.Option>
                                <Select.Option value="偏低">偏低</Select.Option>
                                <Select.Option value="正常">正常</Select.Option>
                                <Select.Option value="偏高">偏高</Select.Option>
                            </Select>
                        </Form.Item>
                        <p className="status">状态:</p>
                        <Form.Item >
                            <Radio.Group onChange={addState} name="radiogroup" defaultValue={1}>
                                <Radio value={1}>启用</Radio>
                                <Radio value={0}>禁用</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
};
export default ModaladdS;